<template>
	<view class="content">
		<map style="width: 100%; height: 1000px;" show-location :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="tap" @callouttap="outtap"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				foodLocations:[],
				resLocations:[],
				title: 'map',
				latitude: 30.526230995480322,
				longitude: 114.35812750362396,
				covers: []
			}
		},
				watch:{
					foodLocations(newVal,oldVal){
						this.resetFoodMarkers()
					},
					resLocations(newVal,oldVal){
						this.resetResMarkers()
					},
					
				},
		methods: {
			tap(e){
				console.log(e)
			},
			outtap(e){
				if(e.detail.markerId<=2000){
					uni.navigateTo({
						url:'/pages/details/food-details/detail?id='+(e.detail.markerId-1000)
					})
				}
				else{
					uni.navigateTo({
						url:'/pages/details/restaurant-details/detail?id='+(e.detail.markerId-2000)
					})
				}
			},
			
			async getFoodLocations(){
				const res=await this.$myRequest({
					url:'/FoodArticle/api/location'
				})
				console.log(res);
				this.foodLocations=res.data

				
			},
			async getResLocations(){
				const res=await this.$myRequest({
					url:'/MerchantArticle/api/location'
				})
				console.log(res);
				this.resLocations=res.data

			},
			resetFoodMarkers(){
				var that=this;
				this.foodLocations.forEach(item=>{
					that.covers.push({
						latitude: item.food.addressY,
						longitude: item.food.addressX,
						width:50,
						height:50,
						iconPath:'../../../static/icons/map-food.png',
						id:item.foodArticleID+1000,
						callout:{
								color:'#000000',
								content:item.food.name,
								fontSize:16,
								borderRadius:20,
								padding:20,
								bgColor:'#FFE4C4',
								textAlign:'center',
								display:"BYCLICK"
						}
					})
				})
				},
				resetResMarkers(){
					var that=this;
				this.resLocations.forEach(item=>{
					that.covers.push({
						latitude: item.merchant.addressY,
						longitude: item.merchant.addressX,
						width:50,
						height:50,
						iconPath:'../../../static/icons/map-res.png',
						id:item.merchantArticleID+2000,
						callout:{
								color:'#000000',
								content:item.merchant.name,
								fontSize:16,
								borderRadius:20,
								padding:20,
								bgColor:'#FA8072',
								textAlign:'center',
								display:"BYCLICK"
						}
					})
					})
				}			
		},
		created() {
			this.getFoodLocations()
			this.getResLocations()
		}
	}
</script>

<style lang="less">
	.content{
		margin-top: -200px;
	}
</style>
